* {
    transition-duration: 300ms;
}
body, select, input {
    font-family: Arial, Verdana, Sans-Serif;
    color: #2b2b2b;
    font-size: 13px;
    margin: 0;
    padding: 0;
}
select, input {
    border-radius: 2px;
    border: 1px solid #535353;
    padding: 5px 10px;
}
h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: #535353;
}
.page {
    margin: 0 auto;
    width: 1000px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.italic {
    font-style: italic;
}
/* COLORS */
.page .red {
    color: #D51A1A;
}
.page .light-gray {
    color: #9F9F9F;
}
.new {
    color: #D51A1A;
    font-size: 14px;
    font-weight: bold;
}
.no-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}
/* END COLORS */

/* BUTTONS */
input.button {
    padding: 8px 0;
}
.button {
    display: inline-block;
    padding: 8px 20px;
    background: #DADADA;
    border: 2px solid #9F9F9F;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    border-radius: 2px;
}
.button:hover {
    background: #9F9F9F;
    border-color: #6A6A6A;
}
.green-hover:hover,
.green-hover:focus {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0AC40A), color-stop(1, #15A515));
    background-image: -o-linear-gradient(bottom, #0AC40A 0%, #15A515 100%);
    background-image: -moz-linear-gradient(bottom, #0AC40A 0%, #15A515 100%);
    background-image: -webkit-linear-gradient(bottom, #0AC40A 0%, #15A515 100%);
    background-image: -ms-linear-gradient(bottom, #0AC40A 0%, #15A515 100%);
    background-image: linear-gradient(to bottom, #0AC40A 0%, #15A515 100%);
    border-color: #21C821;
    color: #E7E7E7;
}
/* END BUTTONS */

/* HEADER */
header, footer {
    box-shadow: #2b2b2b 0px 2px 15px -3px;
    font-size: 15px;
}
header {
    height:120px;
    margin: 15px 0 0 0;
}
header .left img {
    display: block;
    margin: 22px 0 22px 22px;
}
header .right > div{
    padding: 10px 20px;
    height: 84px;
    margin: 8px 0 5px;
    text-align: right;
    float: left;
}
header .right > div.admin-shortcuts ul {
    margin-top: 5px;
}
.admin-shortcuts li {
    text-align: left;
    margin: 0 0 10px;
}
.admin-shortcuts li:before {
    content: "> ";
}
.admin-shortcuts,
.navigation {
    border-right: 2px solid #888;
}
.profile {
    line-height: 35px;
}
.profile img {
    max-height: 34px;
    float: left;
    margin-right: 10px;
}
.profile .logout {
    margin-top: 10px;
}
header .navigation select {
    font-size: 15px;
    padding: 6px 9px;
    margin: 0 0 10px;
    width: 180px;
}
#notifications {
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
#notifications > span{
    cursor: pointer;
    padding: 6px;
    width: 23px;
    height: 23px;
    border: 2px solid #9F9F9F;
    border-radius: 4px;
    background: #D51A1A;
    color: white;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    display: inline-block;
}
#notifications.zero > span {
    background: #E7E7E7;
    border-color: #DADADA;
    color: #9F9F9F;
}
#notifications > div {
    display: none;
    position: absolute;
    background: #F5F5F5;
    text-align: left;
    right: 0px;
    width: 250px;
    max-height: 220px;
    padding: 15px;
    border-radius: 1px;
    box-shadow: #2b2b2b 0 0 8px -2px;
    z-index: 100;
}
#notifications:hover div {
    display: block;
}
#notifications div li {
    margin: 2px 0;
}
#notifications div li:hover {
    background: #FAFAFA
}
#notifications > div p {
    text-align: center;
    color: #9F9F9F;
    font-weight: bold;
    padding: 50px 30px;
    line-height: 30px;
    font-size: 17px;
}
#notifications > div p span {
    white-space: nowrap;
}
/* HEADER UI-MESSAGE */
#ui-message {
    display: inline-block;
    margin: 0 0 0 -275px;
    width: 500px;
    padding: 5px 25px;
    font-size: 13px;
    font-weight: bold;
    color: #535353;
    position: fixed;
    top: -45px;
    border-radius: 0 0 3px 3px;
    border: 1px solid #DADADA;
    box-shadow: 0 0 18px 0px #9F9F9F;
    border-top: none;
    background: #C9FCC9;
    transition-duration: 700ms;
    transition-timing-function: ease-in;
    z-index: 10000;
}
#ui-message.display {
    top: 0px;
}
/* END HEADER UI-MESSAGE */
/* END HEADER */
/* FOOTER */
footer {
    margin: 20px 0;
    padding: 10px 50px;
    box-shadow: none;
}

footer ul {
    text-align: center;
}

footer li {
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    border-right: 1px solid #9F9F9F;

}
footer li:last-child {
    border-right: none;
}
/* END FOOTER */
/* ANONYMOUS INDEX */
.anonymous.index h1 {
    font-family: open sans-serif;
    font-size: 35px;
    text-align: center;
    font-style: italic;
    margin: 20px 0 50px;
    position: relative;
}
.anonymous.index h1 span.quote {
    font-family: Times New Roman;
    font-style: normal;
    font-size: 45px;
}
.anonymous.index h1 span.toto {
    font-size: 16px;
    position: absolute;
    bottom: 0;
}
.anonymous.index p {
    margin: 20px 50px;
    font-size: 16px;
}
.anonymous.index .connexion {
    margin: 50px 100px 30px;
    font-size: 24px;
}
/* END ANONYMOUS INDEX */
/* LOGIN */
.login {
    text-align: center;
}
.login form {
    display: inline-block;
}
.login div.line {
    margin: 15px 0 0;
}
.login div input {
    padding: 10px 20px;
    font-size: 20px;
    width:275px;
}
.login input[type="submit"] {
    float: right;
    padding: 8px 30px;
    margin: 0 0 10px;
}
.login div.line.error {
    text-align: left;
    font-size: 13px;
    font-weight: bold;
    margin: 5px 0 10px;
}
/* END LOGIN */
/* CONTENT */
section {
    margin: 30px 0 10px;
    padding: 15px 10px;
    box-shadow: #535353 0 0 16px -4px;
    position: relative;
}
/* CONTENT > TASK-LIST-PAGE */
.task-list-page aside input {
    background: url('../../resources/images/ico/home-glass.png') no-repeat 260px 10px;
    padding: 10px 35px 10px 15px;
    font-size: 16px;
    width: 240px;
    margin-left: 10px;
}
.task-list-page aside input:focus {
    background-position-x: 340px;
    width: 320px;
}
.task-list-page hr {
    margin: 20px 85px 10px;
}
.task-list-page li > div {
    display: inline-block;
    font-size: 15px;
}
.task-list-page .header {
    position: absolute;
    z-index: -1;
    top: 15px;
    left: 0;
}
.task-list-page .header > li {
    padding: 0;
}
.task-list-page .header > li > div {
    font-size: 17px;
    text-align: center;
    font-weight: bold;
    padding: 0;
}
.task-list-page .task-name {
    width:580px;
}
.task-list-page .task-new {
    width:160px;
    position: absolute;
    left: 605px;
    font-style: italic;
    text-align: center;
}
.task-list-page .task-new span {
    font-size: 26px;
    font-weight: bold;
    color: #D51A1A;
    display: inline-block;
    padding: 10px 0 0;
}
.task-list-page .task-new.zero span {
    color: #9F9F9F;
}
.task-list-page .task-date {
    width: 190px;
    position: absolute;
    left:795px;
    padding: 15px 0 0;
}
.task-list-page h2 {
    color: #9F9F9F;
}
.task-list-page h3 {
    color: #444;
    font-size: 19px;
    margin: 0 0 7px;
}
.task-list-page p {
    color: #888;
    font-size: 13px;
}
#notifications li,
.task-list-page ul li {
    margin: 5px 0;
    padding: 10px;
    cursor: pointer;
}
#notifications li:hover,
.task-list-page ul li:hover {
    background: #F5F5F5;
    border-color: #DADADA;
    box-shadow: #535353 0 0 9px -1px;
}
/* END CONTENT > TASK-LIST-PAGE */
/* CONTENT > TASK-DETAILS */
.task-details-page {
    padding-left:40px;
}
.task-details-page .col1,
.task-details-page .col2 {
    display: inline-block;
    vertical-align: top;
}
.task-details-page .col1 {
    width: 585px;
    margin: 0 25px 0 0;
}
.task-details-page .col2 {
    width: 325px;
}
.task-details-page .col2 .comments .picture,
.task-details-page .col2 .comments .text,
.task-details-page .col2 .comments .date {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    font-size: 15px;
}
.task-details-page .col2 .comments {
    font-size: 0px;
}
.task-details-page .col2 .comments .picture {
    width: 40px;
    margin: 0 5px 0 0;
}
.task-details-page .col2 .comments .text {
    width: 205px;
}
.task-details-page .col2 .comments .line1 .text {
    width: 185px;
}
.task-details-page .col2 .comments .line2 .text {
    width: 275px;
    text-align: justify;
}
.task-details-page .col2 .comments .date {
    width: 100px;
}

.task-details-page .top {
}
.task-details-page hr {
    margin: 15px 30px 15px 0;
}
.task-details-page .top .col1 h2 {
    font-size: 38px;
    line-height: 45px;
}
.task-details-page .top .col1 p {
    font-size: 16px;
    line-height: 23px;
    color: #6A6A6A;
    margin: 10px 0 30px;
}
.task-details-page .top .col1 > a {
    float: right;
    margin: 0 0 20px;
}
.task-details-page .top .col2 h2 {
    font-size: 30px;
    line-height: 45px;
}
.task-details-page .top .col2 h3 {
    font-weight: normal;
    font-size: 18px;
    color: #9F9F9F;
    margin: 0 0 5px;
}
.task-details-page .top .col2 > img {
    margin: 2px;
}
.task-details-page .bottom {
}
.task-details-page .bottom .error {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
}
.task-details-page .bottom .col1 h3,
.task-details-page .bottom .col1 .date {
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
    line-height: 33px;
}
.task-details-page .bottom .col1 .download {
    background: url('../../resources/images/download.png') no-repeat;
    background-size: contain;
    border: none;
    width: 35px;
    height: 33px;
    cursor: pointer;
    display: inline-block;
}
.task-details-page .bottom .col1 h3 {
    width: 340px;
    margin: 0 5px 0 8px;
}
.task-details-page .bottom .col1 .doc-list p {
    margin: 5px 0 15px 7px;
    font-size: 12px;
}
.task-details-page .bottom .col1 .doc-list .date {
    width: 145px;
    margin: 0 5px 0 0;
}
.task-details-page .bottom .col1 .doc-list .downwload {
    width: 40px;
}
.task-details-page .bottom .col1 .doc-list img {
    max-height: 33px;
    margin: 0;
}
.task-details-page .bottom .col1 .doc-list div {
    font-size: 0;
    position: relative;
    margin: 5px 0;
    padding: 5px;
    border: 1px solid white;
}
.task-details-page .bottom .col1 .doc-list div:hover,
.task-details-page .bottom .opinion .opinion-list .opinion-render:hover {
    background: #F5F5F5;
    border-color: #E7E7E7;
}
.task-details-page .bottom .col1 .doc-list .new {
    position: absolute;
    left: -32px;
    line-height: 33px;
}
.task-details-page .bottom input[type="file"] {
    border: none;
    display: inline-block;
    padding: 10px 0;
}
.task-details-page .bottom input[type="submit"] {
    float: right;
    display: inline-block;
    width: 100px;
    color: #535353;
}
.task-details-page .bottom .doc-upload,
.task-details-page .bottom .opinion {
    margin: 30px 0 0;
}
.task-details-page .bottom form img {
    margin: 7px 10px 0 0;
    max-width: 35px;
    float: left;
}
.task-details-page .bottom .opinion form img {
    margin: 2px 10px 0 0;
    max-height: 31px;
}
.task-details-page .bottom .opinion textarea {
    resize: none;
    font-family: arial;
    font-size: 15px;
    line-height: 20px;
    padding: 8px 12px;
    width: 426px;
    height: 80px;
    border: 1px solid #888;
}
.task-details-page .bottom .opinion textarea:focus {
    height: 120px;
}
.task-details-page .bottom .opinion .opinion-list {
}
.task-details-page .bottom .opinion .opinion-list .opinion-render {
    border: 1px solid white;
    margin: 10px 0 15px;
    padding: 5px;
    position: relative;
}
.task-details-page .bottom .opinion .opinion-list .opinion-render .new {
    position: absolute;
    left: -32px;
    line-height: 20px;
}
.task-details-page .bottom .opinion .opinion-list p {
    font-size: 17px;
    margin: 0 0 5px;
}
.task-details-page .bottom .opinion .opinion-list p.empty {
    font-size: 12px;
    margin: 5px 0 10px 7px;
}
.task-details-page .bottom .opinion .opinion-list .date {
    width: 148px;
}
.task-details-page .bottom .opinion .opinion-list .details * {
    font-size: 14px;
    line-height: 25px;
    height: 25px;
}
.task-details-page .bottom .opinion .opinion-list .details .attachment {
    text-align: right;
}
.task-details-page .bottom .opinion .opinion-list .details .attachment h3 span {
    font-weight: normal;
}
.task-details-page .bottom .opinion .opinion-list .details img {
    max-height: 25px;
}
.task-details-page .bottom .opinion .opinion-list .false {
    display: none;
}
.task-details-page form .col2 .comments * {
    margin-top: 10px;
    vertical-align: bottom;
}
.task-details-page .col2 form {
    margin: 0 0 20px;
}
.task-details-page .col2 .comments textarea.text {
    padding: 5px;
    border: 1px solid #888;
    resize: none;
    font-family: arial;
    height: 65px;
    margin-right: 5px;
}
.task-details-page .col2 .comments textarea.text:focus {
    height: 100px;
}
.task-details-page .col2 .comments p {
    font-size: 12px;
}
.task-details-page .col2 .comments .message {
    margin-bottom: 12px;
    outline: 1px solid #E7E7E7;
    background: #F5F5F5;
}
.task-details-page .col2 .comments .message:hover {
    outline: 1px solid #DADADA;
    background: #E7E7E7;
}
.task-details-page .bottom .col2 .line1 .picture {
    max-width: 30px;
    margin: 5px;
}
.task-details-page .bottom .col2 .line2  {
    position: relative;
    display: none;
}
.task-details-page .bottom .col2 .expand .line2  {
    display: block;
}
.task-details-page .bottom .col2 .line2 .new {
    position: absolute;
    margin: 0;
    width: 40px;
    text-align: center;
}
.task-details-page .bottom .col2 .line2 p.text {
    margin: 0 0 5px 40px;
}
/* END CONTENT > TASK-DETAILS */
/* END CONTENT */